import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';


class OwlMusic extends PolymerElement {

    constructor(){

        super();
        this.step=0.0;
        this.durationtime=0.0;
        this._isplay=false;
        this._isdown=false;
        this.readyoffset=0;
        this.targetWidth=0;
        this.conWidth=0;
        this.currentOffsetLeft=0;
        this.value=0.0;
        this.downX=0;
        this.ctrlBall=null;
        this.progBar=null;
        this._playEvent=this._play.bind(this);
        this._downEvent=this._conDown.bind(this);
        this._upEvent=this._conUp.bind(this);
        this._moveEvent=this._conMove.bind(this);
        this._outEvent=this._conOut.bind(this);
        this._timeUpdate=this.starPlaying.bind(this);
    }

    connectedCallback(){

        super.connectedCallback();
        this.$._play.addEventListener("click",this._playEvent);
        this.$.conball.addEventListener("mousedown",this._downEvent);
        this.$.conball.addEventListener("touchstart",this._downEvent);
        let alltime=this.$._audio.duration;
        setTimeout(()=>{
            this.durationtime=this.$._audio.duration;
            this.step=this.targetWidth/this.durationtime;
            let dur =(this.durationtime/60).toFixed(2);
            let list=dur.toString().split(".");
            let number1="0";
            if(list[0].length<2){
                number1+=list[0];
            }
            this.$.timer.innerText=number1+":"+list[1];

        },1000);
    }

    disconnectedCallback(){
        super.disconnectedCallback();

        this.$._play.removeEventListener("click",this._playEvent);
        this.$.conball.removeEventListener("mousedown",this._downEvent);
        this.$._item.removeEventListener("mousemove",this._moveEvent);
        this.$._item.removeEventListener("mouseup",this._upEvent);
        this.$._item.removeEventListener("mouseleave",this._outEvent);
        this.$._audio.removeEventListener("timeupdate",this._timeUpdate);
    }

    ready(){

        super.ready();
        this.$._poster.src=this.imgsrc;
        this.readyoffset=this.$.conball.offsetLeft;
        this.targetWidth=this.$.timel.clientWidth;
        this.conWidth=this.$.conball.clientWidth;
        this.ctrlBall=this.$.conball;
        this.progBar=this.$.prog;

         this.progBar.style.backgroundColor=this.progcolor;

         this.$.audioText.style.color=this.titlecolor;
        if(this.imgsrc!=""){

            this.$._poster.src=this.imgsrc;
        }

        if(this.audiosrc!="") {

            this.$._audio.src = this.audiosrc;
        }

        if(this.audiotitle!=""){

            this.$.audioText.innerText=this.audiotitle;
        }else if(this.audiosrc!=""){

            this.$.audioText.innerText=this._getDefaultName(this.audiosrc);
        }
    }

    static get properties() { return {

        imgsrc:{

            type:String,
            value:"",
        },
        audiosrc:{

            type:String,
            value:""
        },
        audiotitle:{

            type:String,
            value:""
        },
        loop:{

            type:String,
            value:"false"
        },
        progcolor:{

            type:String,
            value:"rgba(255,0,0,1)"
        },
        titlecolor:{

            type:String,
            value:"rgba(255,0,0,1)"
        }
    }};


    _conMove(e) {

        if (this._isdown) {

            let target = this.$.conball;
            let offset = e.clientX - this.downX;
            let targetoffset = this.currentOffsetLeft;
            //向左移动

            if (offset < 0) {

                if ((-offset) <= (this.downX-this.readyoffset+this.conWidth/2)) {

                    this.value= (this.downX-this.readyoffset) + offset;
                    target.style.marginLeft =this.value+ "px";
                    this._setStatusBar(this.value);
                }

            } else {

                if (offset <= (this.readyoffset + this.targetWidth - this.downX) -this.conWidth/2 ) {

                    this.value=(this.downX-this.readyoffset) +offset;
                    target.style.marginLeft = this.value+"px";
                    this._setStatusBar(this.value);
                }

            }
        }
    }


    _conDown(e){

      this._isdown=true;
      this.downX=e.clientX;
      this.currentOffsetLeft=this.$.conball.offsetLeft-this.readyoffset;
      this.$._item.addEventListener("mousemove",this._moveEvent,false);
      this.$._item.addEventListener("mouseup",this._upEvent,false);
      this.$._item.addEventListener("mouseleave",this._outEvent,false);

      this.$._item.addEventListener("touchmove",this._moveEvent,false);
      this.$._item.addEventListener("touchend",this._upEvent,false);

    }

    _conOut(){

        this._isdown=false;
    }
    _conUp(){
        this._isdown=false;
        let temper=(this.value/this.targetWidth)*((this.durationtime));
        // let temper=this.value*this.step;
        console.log("the all time ="+this.durationtime);
        console.log("the value ="+this.value);
        console.log("the current time = "+temper);
        this.$._audio.currentTime=temper.toFixed(4);

    }

    _play(){

        if(this._isplay){

            this.$._play.src="./owl-img/play.png"
            this.$._audio.pause();
            this.$._audio.removeEventListener("timeupdate",this._timeUpdate);

        }else{

            this.$._play.src="./owl-img/pause.png"
            this.$._audio.play();
            this.$._audio.addEventListener("timeupdate",this._timeUpdate);
        }
        this._isplay=!this._isplay;
   }

   _setLineLineAudio(){

        let pos=this.$._audio.currentTime;
        let nextpos=pos*this.step;
        this._setStatusBar(nextpos);
        this._setControllBalFollowing(nextpos);
   }

   _setControllBalFollowing(value){

        this.ctrlBall.style.marginLeft=-5+value+"px";
   }
   _setTimeTextFollowing(value){


   }

   _getDefaultName(filename){

        let item=filename.split('/');
        return item[item.length-1].split(".")[0];
   }

   starPlaying(){

        this._setLineLineAudio();
   }


    _setStatusBar(value){

        this.progBar.style.width=value+"px";
    }


    static get template() {
        return html`
             <style>
             
            .owl-music{
            
               width: calc(100% - 24px);
               margin-top: 12px;
               margin-left: 12px;
               height: 100px;
               background-color: white;
               box-shadow: 0.2px 0.2px 4px 0.4px rgba(120,120,120,0.4);
               display: flex;
               background-color: white;
            
            }
            .owl-music-poster{
            
               width: 28%;
               height: 100%;
               /*background-color: aquamarine;*/
            
            }
            .owl-music-poster .poster{
                
                width: 100%;
                height: 100%;
         
            }
            
             .owl-music-poster .controller{
             
                width: 50px;
                height: 50px;
                position: relative;
                left: 50%;
                outline: none;
                margin-top: -75px;
                margin-left: -25px;
                cursor: pointer;
             
             }
            .owl-music-controller{
            
               width: 78%;
               height: 100%;
               /*background-color: bisque;*/
               
      
            }
            .owl-music-title{
            
               width: 100%;
               height: 40%;
               /*background-color: yellow;*/
               margin-top: 5%;
            
            }
            
            .owl-music-timeline{
               width: 100%;
               height: 40%;
               /*background-color: aqua;*/
            }
            .owl-music-timeline .timeline{
            
               width: 70%;
               margin-left: 12px;
               height: 2px;
               background-color: rgba(120,120,120,0.5);
               display: inline-block;
               margin-top: 8px;
             
            }
               .owl-music-timeline .timeinfo{
               
                 width: 20%;
                 height: 20px;
                 /*background-color: yellow;*/
                 font-size: 0.6rem;
                 color: rgba(120,120,120,0.8);
                 padding-left: 8px;
               
               }
               .timeline .timeline-ball{
               
                 width: 10px;
                 height: 10px;
                 background-color: rgba(255,255,255,1);
                 box-shadow: 0.1px 0.1px 0.2px 2px rgba(120,120,120,0.5);
                 margin-top: -4px;
                 border-radius: 50%;
                 cursor: pointer;
                 margin-left: -5px;
                 position:relative ;
               
               }
               .timeline .prog{
                 width: 0px;
                 height: 100%;
                 background-color: red;
                 margin-top: -6px;
                 
               
               }
             
            </style>
        
          
           <div class="owl-music" id="_item">
               <audio src="" id="_audio"  loop="false" hidden="false"></audio>
             <div class="owl-music-poster">
                <img class="poster" src="../star.png" id="_poster">
                <img  class="controller" src="./owl-img/play.png" id="_play">
             </div>
             
             <div class="owl-music-controller">
                <div class="owl-music-title">
                
                 <p style="padding-left: 12px;font-size: 0.8rem;color: #f573a0" id="audioText">蝶々結び--Aimer</p>
                </div>
                <div class="owl-music-timeline">
                <div style="width: 100%;display: flex">
                   <div class="timeline" id="timel">
             
                       <div class="timeline-ball" id="conball"></div>
                             <div class="prog" id="prog"></div>
                       
                    </div>
                   <div class="timeinfo" id="timer">00:00</div>
                 </div>
                   
                 </div>
             </div>
           </div>
        
        `;
    }

}
customElements.define("owl-music",OwlMusic);


